import type React from 'react'
import { useTheme } from '../../theme'
import styles from './Button.module.less'

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
  glow?: boolean
  className?: string
  onClick?: () => void
  children: React.ReactNode
}

const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  disabled = false,
  loading = false,
  glow = false,
  className,
  onClick,
  children,
}) => {
  const { theme, themeName } = useTheme()

  const classNames = [
    styles.button,
    styles[variant],
    styles[size],
    styles[`theme-${themeName}`],
    disabled && styles.disabled,
    loading && styles.loading,
    glow && styles.glow,
    className,
  ]
    .filter(Boolean)
    .join(' ')

  const buttonStyle = {
    '--theme-primary-gradient': theme.colors.primary.gradient,
    '--theme-secondary-gradient': theme.colors.secondary.gradient,
    '--theme-outline-border': theme.colors.outline.border,
    '--theme-primary-shadow': theme.colors.shadow.primary,
    '--theme-secondary-shadow': theme.colors.shadow.secondary,
    '--theme-glow-gradient': `linear-gradient(45deg, ${theme.colors.primary.light}, ${theme.colors.primary.main}, ${theme.colors.primary.dark}, ${theme.colors.primary.light})`,
  } as React.CSSProperties

  return (
    <button
      type="button"
      className={classNames}
      style={buttonStyle}
      onClick={onClick}
      disabled={disabled}
    >
      {loading && <span className={styles.spinner} />}
      {children}
    </button>
  )
}

export default Button
